<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >社区购物</el-breadcrumb-item>
            <el-breadcrumb-item >商品详情 / {{$route.params.goodId}} <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button></el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20" v-if="detail">
            <el-col :span=8 :offset="1">
                <img :src="detail.img" alt="" class="boximg">
            </el-col>
            <el-col :span=8 :offset="1" style="font-size:14px">
                <el-link> {{detail.name }}</el-link>
                <p style="color:#67C23A">分类 : {{detail.type.text}}</p>
                <h6>单价: <span  style="color:#F56C6C"> ¥ {{detail.price }}</span></h6>
                <h6>折扣: <span  style="color:#303133"> {{detail.discount }}</span></h6>
                <div class="margintop20">
                    <span style="color:#303133">购买数量:</span>
                    <el-input-number v-model="count" :min="1"  ></el-input-number>
                </div>
                <div class="margintop20">
                    <el-button type="success" size="mini"  @click="addToshopcar">加入购物车</el-button>
                    <el-button type="danger" size="mini" @click="gotobuygood" >查看我的商品(购买)</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getgoodone,addtocartajax} from "@/api"
export default {
    data(){
        return {
            detail:null,
            count:1
        }
    },
    methods:{
        gotobuygood(){
            this.$router.push({name:"mygood"})
        },
        addToshopcar(){
            addtocartajax({
                goodId:this.$route.params.goodId,
                good:this.detail,
                count:this.count
            })
            .then(res=>{

            })
            // who 
            // goodid  (detail)
            // count 
        }
    },
    mounted(){
        getgoodone({
            _id:this.$route.params.goodId
        })
        .then(res=>{
            if(res.type){
                this.detail = res.result;
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.boximg{
    height:300px;
    width:100%;
}
</style>